<template>
	<div id="cart">
		<div @click="clickRemove()">
			<img src="../../assets/img/common/fh.png" id="img">
		</div>
		<div id="h"></div>
		<hr style="border: 6px solid #BEBEBE;">
		<div id="list">
			<p>
				<input type="checkbox" name="" id="" value="" />鞋子店
				<label><img src="../../assets/img/common/fh.png"></label>

			</p>

			<div class="img">
				<img src="../../assets/img/common/sp3.png" id="img1">
			</div>
			<div class="center">
				<span style="padding-bottom: 20px;">女生鞋子</span>
				<br>
				<p style="border: 1px red solid;width: 120px;color: red;">8.28 0点秒杀</p>
				<p style="color: red;font-size: 20px;padding-top: 10px;">￥{{this.list[0].price}}</p>

			</div>

		</div>
		<div class="center" v-for="(item,index) in list" :key=item.index>
			<div id="">
				<button type="button" id="btn" @click="clickReduce(index)" v-bind:disabled="item.counter <1">-</button>
				<span>{{item.counter}}</span>
				<button type="button" @click="clickRecom(index)">+</button>
				<span style="padding-left: 10px;">x{{item.counter}}</span>
			</div>

		</div>
		<div id="h"></div>
		<hr style="border: 6px solid #BEBEBE;">
		<div id="menu" v-for="(item,index) in list" :key=item.index>
			<p style="padding-top: 10px;color: #000000;">
				<input type="checkbox" name="select" @click="clickSelects(index)"  @af='fs()'/>全选
				<span id="select">已经选择<i style="color: red;">{{item.counter}}</i>件</span>
				<span id="sum">合计<i style="color: red;">{{clickSelect()}}</i>元</span>
				<button type="button" id="js" @click="clickBtn">去结算({{clickSelect()}})元</button>
			</p>
		</div>
		<ul style="height: 60px;"></ul>
	</div>

</template>

<script>
	export default {
		name: "Cart",
		data() {
			return {
				num: 0,
				list: [{
					id: 1,
					price: 87,
					counter: 1
				}, ],
				f:false
			}
		},
		components: {

		},
		methods: {
			
			clickRemove() {
				this.$router.push('./detail')
			},
			clickRecom(index) {
				this.list[index].counter++
			},

			clickReduce(index) {
				this.list[index].counter--
			},
			clickSelect() {
				var sum = 0
				for (var i = 0; i < this.list.length; i++) {
					sum += this.list[i].price * this.list[i].counter

				}
				return sum
			},

			clickSelects(index) {

				if (this.list[index].counter == 0) {
					this.f = false
					this.list[index].counter = 1
				}
				
			},
			clickBtn(){
				alert('支付成功')
			},
			
		}
	}
</script>

<style scoped>
	#select {
		padding-left: 20px;
	}

	#sum {
		padding-left: 20px;
	}

	#js {
		margin-left: 80px;
		height: 40px;
		width: 110px;
		background-color: red;
	}

	#menu {
		height: -79px;
		border: 2px solid sandybrown;
		background-color: #BEBEBE;
		left: 0;
		right: 0;
		bottom: 0;
		margin-top: 200px;
	}

	#ipt {
		margin-left: 8px;
		height: 20px;
		width: 20px;
		margin-top: 30px;

	}

	#btn {
		margin-right: 5px;
	}

	.center button {
		margin-top: 130px;
		margin-left: 5px;
	}

	#h {
		margin-top: 30px;
	}

	#list #img1 {
		height: 150px;
		width: 170px;
		margin-top: 10px;
	}

	.center span {
		font-size: 20px;
		color: #F4A460;
	}

	#list .center,
	.img {
		float: left;
	}

	#list .center {
		height: 150px;
		width: 200px;
		margin-left: 45px;

	}

	p {
		font-size: 20px;
		color: sandybrown;
	}

	p img {
		width: 20px;
		height: 20px;
	}

	#cart #img,
	.right {
		width: 20px;
		height: 20px;
		left: 0px;
		margin-left: 10px;
	}
</style>
